<template>
  <m-card :icon="icon" :title="title">
    <div class="nav jc-between pb-3">
      <div
        class="nav-item"
        :class="{ active: active === i }"
        v-for="(category, i) in categories"
        :key="i"
        @click="$refs.swiperList.swiper.slideTo(i)"
      >
        <div class="nav-link">{{ category.name }}</div>
      </div>
    </div>
    <!-- end of nav -->
    <swiper ref="swiperList" @slideChange="slideChange">
      <swiper-slide
        v-for="(category, i) in categories"
        :key="i"
        ref="swiperSlide"
      >
        <!-- 每一个swiper-slide里的内容都是定制的 -->
        <slot name="items" :category="category"></slot>
      </swiper-slide>
    </swiper>
  </m-card>
</template>

<script>
export default {
  props: {
    icon: { type: String, required: true },
    title: { type: String, required: true },
    categories: { type: Array, required: true }
  },
  data () {
    return {
      active: 0
    }
  },
  computed: {

  },
  created () {

  },
  mounted () {
  },
  watch: {

  },
  methods: {
    slideChange () {
      this.active = this.$refs.swiperList.swiper.activeIndex
    }
    // slideColor () {
    //   const slide = this.$refs.swiperSlide

    //   slide[1].$slots.default[0].children[0].children[0].children[0].data.staticClass = 'new-category fs-xs text-hot'

    //   console.log(slide[1].$slots.default[0].children[0].children[0].children[0].data.staticClass)
    // }
  },
  components: {

  }
}
</script>

<style scoped lang="scss">
@import "../assets/scss/variables";
</style>
